export const historyMessage = `
<div class="blog-content-box">
<div class="article-header-box">
<div class="article-header">
    <div class="article-title-box">
        <h1 class="title-article" id="articleContentId">网页dom元素过多为什么会导致页面卡顿</h1>
    </div>
    <div class="article-info-box">
        <div class="article-bar-top">
            <img class="article-type-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/original.png" alt="">
            <div class="bar-content">
            <a class="follow-nickName " href="https://blog.csdn.net/qdmoment" target="_blank" rel="noopener">qdmoment</a>
            <img class="article-time-img article-heard-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCurrentTime2.png" alt="">
            <span class="time">于&nbsp;2020-06-05 22:50:45&nbsp;发布</span>
            <img class="article-read-img article-heard-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/articleReadEyes2.png" alt="">
            <span class="read-count">9152</span>
            <a id="blog_detail_zk_collection" class="un-collection" data-report-click="{&quot;mod&quot;:&quot;popu_823&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4232&quot;,&quot;ab&quot;:&quot;new&quot;}">
                <img class="article-collect-img article-heard-img un-collect-status isdefault" style="display:inline-block" src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarCollect2.png" alt="">
                <img class="article-collect-img article-heard-img collect-status isactive" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarCollectionActive2.png" alt="">
                <span class="name">收藏</span>
                <span class="get-collection">
                    7
                </span>
            </a>
            </div>
        </div>
        <div class="blog-tags-box">
            <div class="tags-box artic-tag-box">
                    <span class="label">分类专栏：</span>
                        <a class="tag-link" href="https://blog.csdn.net/qdmoment/category_9044129.html" target="_blank" rel="noopener">性能优化</a>
            </div>
        </div>
        <div class="slide-content-box">
            <div class="article-copyright">
                <div class="creativecommons">
                    版权声明：本文为博主原创文章，遵循<a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener"> CC 4.0 BY-SA </a>版权协议，转载请附上原文出处链接和本声明。
                </div>
                <div class="article-source-link">
                    本文链接：<a href="https://blog.csdn.net/qdmoment/article/details/106502972" target="_blank">https://blog.csdn.net/qdmoment/article/details/106502972</a>
                </div>
            </div>
        </div>
        <div class="operating">
            <a class="href-article-edit slide-toggle">版权</a>
        </div>
    </div>
</div>
</div>

<div id="blogColumnPayAdvert">
    <div class="column-group">
        <div class="column-group-item column-group0 column-group-item-one">
            <div class="item-l">
                <a class="item-target" href="https://blog.csdn.net/qdmoment/category_9044129.html" target="_blank" title="性能优化" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.6332&quot;}">
                    <img class="item-target" src="https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="">
                    <span class="title item-target">
                        <span>
                        <span class="tit">性能优化</span>
                            <span class="dec">专栏收录该内容</span>
                        </span>
                    </span>
                </a>
            </div>
            <div class="item-m">
                <span>3 篇文章</span>
                <span>0 订阅</span>
            </div>
            <div class="item-r">
                    <a class="item-target article-column-bt articleColumnFreeBt" data-id="9044129">订阅专栏</a>
            </div>
        </div>
    </div>
</div>
<article class="baidu_pl">
<div id="article_content" class="article_content clearfix">
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-6e43165c0a.css">
        <div id="content_views" class="htmledit_views">
            <p>在做移动端或者其他无限下拉加载时会遇到不断插入dom的场景，随着dom的增多页面会出现卡顿，遇到这种情况开发者会采取一系列的优化措施，比如复用dom等，那么到底为什么会出现卡顿呢？本文将探讨这个疑问。</p> 
<p>网页卡顿时，浏览器进程内存占用很大，这就说明在卡顿出现的时候，浏览器占用的内存是很大的，如图：</p> 
<p><img alt="" height="122" src="https://img-blog.csdnimg.cn/20200605224845675.png" width="1009"></p> 
<h3><a name="t0"></a>一个实例：</h3> 
<p>一个下拉加载列表，随着dom的增加， HEAP SNAPSHOTS逐渐加大，如下图所示：</p> 
<p><img alt="" height="681" src="https://img-blog.csdnimg.cn/20200605183655649.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FkbW9tZW50,size_16,color_FFFFFF,t_70" width="1008"></p> 
<p>那么到底是哪部分占用内存增加了呢？</p> 
<p><img alt="" height="483" src="https://img-blog.csdnimg.cn/20200605192714772.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FkbW9tZW50,size_16,color_FFFFFF,t_70" width="1200"></p> 
<p><img alt="" height="492" src="https://img-blog.csdnimg.cn/20200605192759953.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FkbW9tZW50,size_16,color_FFFFFF,t_70" width="1200"></p> 
<p>从上面可以看出随着dom的增加 ，HTMLLIElement占用的内存逐渐增加，这是由于下拉加载过程中在页面中添加了LI元素。</p> 
<p>shallow size和retained&nbsp; size</p> 
<h2 id="shallow-size"><a name="t1"></a>Shallow Size：</h2> 
<p>Shallow size就是对象本身占用内存的大小，不包含其引用的对象。</p> 
<ul><li>常规对象（非数组）的 Shallow size 由其成员变量的数量和类型决定。</li><li>数组的shallow size有数组元素的类型（对象类型、基本类型）和数组长度决定。</li></ul>
<h2 id="retained-size"><a name="t2"></a>Retained Size:</h2> 
<p><strong><span style="color:#f33b45;"><code>对象的Retained Size = 对象本身的Shallow Size + 对象能直接或间接访问到的对象的Shallow Size</code></span>&nbsp;</strong><br><strong>也就是说&nbsp;<code>Retained Size</code>&nbsp;就是该对象被&nbsp;<code>GC（Garbage Collection）</code>&nbsp;之后所能回收内存的总和。</strong></p> 
<p>这里GC是指垃圾回收，浏览器的主流垃圾回收机制时标记清除（ie中存在引用计数清除）。</p> 
<h3><a name="t3"></a>除了dom节点内存增大，监听事件占用的内存也逐渐加大</h3> 
<p><img alt="" height="656" src="https://img-blog.csdnimg.cn/2020060522344619.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FkbW9tZW50,size_16,color_FFFFFF,t_70" width="1200"></p> 
<p><img alt="" height="627" src="https://img-blog.csdnimg.cn/20200605223609817.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FkbW9tZW50,size_16,color_FFFFFF,t_70" width="1200"></p> 
<p>监听事件的内存也逐渐增大</p> 
<p>随着内存的占用增大，到一定程度时，网页就出现了卡顿。</p> 
<p>解决办法：</p> 
<p>1，重复利用dom结构，创建虚拟列表</p> 
<p>2，使用事件委托，将监听事件绑定到父元素上</p> 
<p>&nbsp;</p> 
<p>参考：</p> 
<p><a href="https://www.cnblogs.com/yanglongbo/articles/9762359.html">https://www.cnblogs.com/yanglongbo/articles/9762359.html</a></p> 
<p><a href="https://blog.csdn.net/strange_monkey/article/details/81746232">https://blog.csdn.net/strange_monkey/article/details/81746232</a></p> 
<p>&nbsp;</p> 
<p>&nbsp;</p>
        </div><div><div></div></div>
</div>

</article>
<script>
$(function() {
setTimeout(function () {
var mathcodeList = document.querySelectorAll('.htmledit_views img.mathcode');
if (mathcodeList.length > 0) {
var testImg = new Image();
testImg.onerror = function () {
  mathcodeList.forEach(function (item) {
    $(item).before('<span class="img-codecogs">\\(' + item.alt + '\\)</span>');
    $(item).remove();
  })
  MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
}
testImg.src = mathcodeList[0].src;
}
}, 1000)
})
</script>
</div>
`